<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="showEditUserDialog()"
      >添加
      </el-button>
      <el-button
        :disabled="itemsChecked.length === 0"
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        @click="deleteData()"
      >批量删除
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="items"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column :label="'头像'" width="80" align="center">
        <template slot-scope="scope">
          <img
            v-if="scope.row.avatar"
            :src="scope.row.avatar"
            :alt="scope.row.username"
            height="36"
          />
          <img
            v-if="!scope.row.avatar"
            src="@/assets/default_avatar.jpg"
            :alt="scope.row.username"
            height="36"
          />
        </template>
      </el-table-column>
      <el-table-column :label="'用户名'" prop="username" min-width="100"></el-table-column>
      <el-table-column :label="'昵称'" prop="nickname" min-width="100"></el-table-column>
      <el-table-column :label="'用户角色'" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.roleInfos[0].name ? scope.row.roleInfos[0].name:"无" }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="'手机号码'" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone ? scope.row.phone:"无" }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="'创建时间'"
        prop="creationTime"
        sortable="custom"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="380" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            @click="showEditUserDialog(row.id)"
          >编辑用户
          </el-button>
          <el-divider direction="vertical" />
          <el-button
            type="text"
            @click="resetPassPassword(row.id)"
          >重置密码
          </el-button>
          <el-divider direction="vertical" />
          <el-button
            :disabled="currentUserId===row.id"
            type="text"
            @click="deleteData(row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="totalCount > 0"
      :total="totalCount"
      :page-index.sync="q.page"
      :page-size.sync="q.size"
      @pagination="getList"
    />

    <edit-user-dialog ref="editUserDialog" @save="load()"></edit-user-dialog>
  </div>
</template>

<script>
  import { getUserPagingList, deleteUsers, resetPassPassword } from "@/api/user";
  import Pagination from "@/components/Pagination";
  import EditUserDialog from "./components/EditUserDialog";
  import _ from "lodash";

  export default {
    name: "UserList",
    components: {
      pagination: Pagination,
      "edit-user-dialog": EditUserDialog
    },
    data() {
      return {
        q: {
          keyWords: undefined,
          sorting: "id",
          page: 1,
          size: 10
        },
        totalCount: 0,
        items: [],
        itemsChecked: [],
        tableLoading: true,
        tableKey: 0,
        currentUserId: undefined
      };
    },
    created() {
      this.currentUserId = this.$store.getters.userId
      this.load();
    },
    methods: {
      resetSeach() {
        this.creationTime = [];
        this.q = {
          keyWords: undefined,
          sorting: "id",
          page: 1,
          size: 10
        };
        this.load();
      },
      load() {
        this.q.page = 1;
        this.getList();
      },
      getList() {
        this.tableLoading = true;
        getUserPagingList(this.q).then(result => {
          this.items = result.content;
          this.totalCount = result.totalElements;
          this.tableLoading = false;
        });
      },
      sortChange(sortData) {
        const { prop, order } = sortData;
        if (prop && order === "descending") {
          this.q.sorting = prop + " desc";
        } else if (prop && order === "ascending") {
          this.q.sorting = prop;
        } else {
          this.q.sorting = "id";
        }
        this.load();
      },
      selectionChange(selection) {
        this.itemsChecked = selection;
      },
      deleteData(id) {
        let selectedIds = [];
        if (id) {
          selectedIds = [id];
        } else {
          selectedIds = this.itemsChecked.map(item => _.parseInt(item.id));
          if (selectedIds.length <= 0) {
            this.$message({ message: "至少选中一条记录", type: "warning" });
            return;
          }
        }

        this.$confirm("删除后不可恢复， 是否继续?", "确定删除选中的用户吗？", {
          type: "warning"
        })
          .then(() => {
            deleteUsers(selectedIds).then(() => {
              this.load();
              this.$message({ message: "删除成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      resetPassPassword(id) {
        this.$confirm("确认重置该用户密码吗?", "是否继续？", {
          type: "warning"
        })
          .then(() => {
            resetPassPassword(id).then(() => {
              this.$message({ message: "重置成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      showEditUserDialog(id) {
        this.$refs["editUserDialog"].show(id);
      }
    }
  };
</script>

<style scope>
  .item {
    margin-top: 10px;
  }
</style>

